<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            height: 100vh;
            box-sizing: border-box;
        }
        div {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <script>
        var div1 = document.createElement('div');
        document.body.appendChild(div1);

        // 思考过程：1.先创建一个div,为其设置绝对定位 2：通过点击事件获取当前鼠标XY的轴坐标 3：通过改变div的top,left值达到改变位置的目的
        // 4. 通过将点击事件转变为鼠标移动事件可以做到div跟随效果  
        // div1.onclick = function(e) {
        //     // console.log(e);
        //     // div1.style.top = '10px';
        //     // div1.style.left = '10px';  
        // };

        // document.body.onclick = function(e) {
        //     console.log(e.clientX,e.clientY);
        //     div1.style.left = e.clientX + 'px';
        //     div1.style.top = e.clientY + 'px';
        // }
        // 5. 通过设置一个变量，来判断鼠标按下与松开事件来觉得是否开启跟随以达到拖拽的效果
        // 6. 解决每次拖拽时，div都会左上角对齐焦点的问题：将直接鼠标当前XY轴坐标变为计算他们每次鼠标按下前与松开后的距离差
        // var x = false;
        // div1.onmousedown = function() {
        //     x = true
        // }
        // div1.onmouseup = function() {
        //     x = false
        // }
        // document.body.onmousemove = function(e) {
        //     if ( x=== true) {
        //         div1.style.left = e.clientX + 'px';
        //         div1.style.top = e.clientY + 'px';
        //     }
        // }
        // 7。 通过引入两个变量记录鼠标按下前的XY轴坐标的值
        // 8.  计算前后两者的差值 9. 将原始值变为现在值
        var x = false;
        var lastX;
        var lastY;
        div1.onmousedown = function(e) {
            x = true
            lastX = e.clientX;
            lastY = e.clientY;
        }
        div1.onmouseup = function() {
            x = false       
        }
        document.body.onmousemove = function(e) {
            if ( x=== true) {
                var changeX = e.clientX - lastX;
                var changeY = e.clientY - lastY;
                var top = parseInt(div1.style.top) || 0;
                var left = parseInt(div1.style.left) || 0;
                var resultY = top + changeY;
                var resultX = left + changeX;
                if(resultX < 0) {
                    resultX = 0
                };
                if(resultY < 0) {
                    resultY = 0
                };
                div1.style.left = resultX + 'px';
                div1.style.top = resultY + 'px';  
                lastX = e.clientX;
                lastY = e.clientY;
            }
        }
    </script>
</body>
</html>